import { LoaderCircle } from "lucide-vue-next";
import { defineComponent } from "vue";
import { useRouter } from "vue-router";
import Avatar from "@/components/Avatar";
import Container from "@/components/Container";
import List, { ListItem } from "@/components/List";
import useAuthStore from "@/store/auth";

const routes = [
  {
    title: "录音示例",
    path: "/audio/recorder",
    desc: "一个使用浏览器录音功能的示例。",
  },
  {
    title: "组件示例",
    path: "/components",
    desc: "列举本项目使用的各种组件。",
  },
  { title: "Demo", path: "/demo", desc: "各种示例的演示？" },
  {
    title: "Load Data",
    path: "/demo/load-data",
    desc: (
      <>
        一个进入页面后就加载数据的示例。本示例使用 <code>@tanstack/vue-query</code> 来承载对接口调用过程的抽象。
      </>
    ),
  },
  {
    title: "Joke",
    path: "/demo/joke",
    desc: (
      <>
        一个调用远程 HTTP API 的示例。本示例使用 JokeAPI 提供的远程服务，使用 <code>@tanstack/vue-query</code>{" "}
        来承载对接口调用过程的抽象。
      </>
    ),
  },
  {
    title: "Error",
    path: "/demo/error",
    desc: (
      <>
        演示如何处理组件错误。本示例使用 <code>onErrorCaptured</code>{" "}
        钩子来捕获组件错误，避免整个程序崩溃。我们自己包装了一个 <code>ErrorBoundary</code>。
      </>
    ),
  },
  {
    title: "Dom",
    path: "/demo/dom",
    desc: <>演示如何获取组件 dom 元素。Vue 中使用自定义指令来获取 dom 元素。</>,
  },
];

const HomeView = defineComponent({
  setup() {
    const router = useRouter();
    const auth = useAuthStore();

    return () => (
      <Container>
        <h3 class="my-10">Welcome Home!</h3>
        {auth.auth.status === "loading" && <LoaderCircle class="animate-spin" />}
        {auth.auth.status === "ok" && (
          <div class="inline-flex items-center gap-4">
            <Avatar src={auth.auth.avatar} alt="my avatar" /> {auth.auth.username}
          </div>
        )}
        <List
          dataSource={routes}
          rowKey={(it) => it.path}
          renderItem={(it) => (
            <ListItem onClick={() => router.push(it.path)}>
              {" "}
              <div>{it.title}</div>
              <div class="text-gray-500 text-xs">{it.desc}</div>
            </ListItem>
          )}
        />
      </Container>
    );
  },
});

export default HomeView;
